<template>
	<view class="page">
		<view class="subtitle">一站式便捷生活服务入口，满足您的日常需求</view>
		<view class="grid">
			<view class="svc" v-for="s in list" :key="s.text" @tap="open(s)" :aria-label="s.text" hover-class="svc-pressed">
				<image class="icon" :src="s.icon" />
				<text class="txt">{{s.text}}</text>
			</view>
		</view>
		<view class="safe-gap" />
		<bottom-tab active="home" />
	</view>
</template>

<script>
import BottomTab from '@/components/bottom-tab/bottom-tab.vue'
export default{
  components:{ BottomTab },
  
	data(){
		return{list:[
			{ text:'社保查询', icon:'/static/food.svg' },
			{ text:'公交查询', icon:'https://img.icons8.com/fluency/48/bus.png' },
			{ text:'医院挂号', icon:'/static/hospital.svg' },
			{ text:'生活缴费', icon:'https://img.icons8.com/fluency/48/bill.png' },
			{ text:'快递物流', icon:'https://img.icons8.com/fluency/48/track-order.png' },
			{ text:'电影票预订', icon:'/static/ticket.svg' },
			{ text:'外卖点餐', icon:'/static/food.svg' },
			{ text:'共享单车', icon:'/static/bike.svg' },
			{ text:'景点门票', icon:'/static/ticket.svg' },
			{ text:'快递寄件', icon:'/static/parcel.svg' }
		]}
	},
	methods:{
		open(s){
			if(s.text==='快递物流'){
				this.openLogistics()
				return
			}
			if(s.text==='电影票预订'){
				this.openMovies()
				return
			}
			uni.showToast({ title:s.text+'（示例）', icon:'none' })
		},
		openLogistics(){
			uni.showModal({
				title:'快递物流',
				content:'即将接入物流查询API（示例）。请输入单号以查询。',
				showCancel:false
			})
		},
		openMovies(){
			uni.showModal({
				title:'电影票预订',
				content:'即将接入电影票API（示例）。可按城市与影院筛选。',
				showCancel:false
			})
		}
	}
}
</script>

<style scoped>
.page{min-height:100vh;background:#fff;padding:16rpx 24rpx}
.subtitle{color:#666;font-size:26rpx;margin:4rpx 4rpx 12rpx}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16rpx}
.svc{height:160rpx;background:linear-gradient(180deg,#ffffff,#f6f7fb);border-radius:16rpx;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4rpx 12rpx rgba(0,0,0,.06);transition:transform .12s ease, filter .12s ease}
.svc-pressed{transform:scale(.96)}
.icon{width:60rpx;height:60rpx;margin-bottom:8rpx}
.txt{font-size:30rpx;color:#333}
.safe-gap{height:160rpx}
@media (min-width: 768px){
	.grid{grid-template-columns:repeat(3, 1fr)}
}
</style>

